<template>
  <div class="ccui-tab-wrapper">
    <el-button
      size="mini"
      v-for="(item, index) in focuses"
      :key="index"
      @click.native="tabChange(item.focus, index)"
      :type="item.focus === focus ? 'table-top-active' : 'table-top'"
    >
      <template v-if="item.focus === 'formDateBUI'">基本信息</template>
      <template v-else-if="item.focus === 'purchaseList'">发货清单</template>
      <template v-else-if="item.focus === 'attachment'">发货附件</template>
    </el-button>
  </div>
</template>

<script>
export default {
  name: "anchorTitle",
  props: {
    focus: {
      type: String,
      default: "formDateBUI"
    }
  },
  data() {
    return {
      focuses: [
        { focus: "formDateBUI" },
        { focus: "purchaseList" },
        { focus: "attachment" }
      ]
    };
  },
  methods: {
    tabChange(foucs, index) {
      this.$emit("tabChange", foucs, index);
    }
  }
};
</script>

<style scoped lang="scss">
.ccui-tab-wrapper {
  /deep/.el-button--mini {
    span {
      font-weight: 600;
    }
  }
}
</style>
